<template>
  <!-- 打印 -->
  <div ref="print" style="width: 800px; margin: 0 auto;" v-show="isPreview">
    <div style="padding:10px 40px;">
      <!-- 送达通知书 -->
      <h2 style="width:100%;text-align:center;margin:50px 0;font-weight:bold;font-size:22px;">北京汽车合格证送达通知书</h2>
      <div>
        <p style="font-size:20px;">
          <span style="text-decoration:underline">{{
            data.accountTypeName == null ? '' : data.accountTypeName.indexOf('(') != -1 ? data.accountTypeName.substring(0, data.accountTypeName.indexOf('(')) : data.accountTypeName
          }}</span
          >公司：
        </p>
        <p style="font-size:20px;line-height: 2;">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;现根据<span style="text-decoration:underline">{{ data.dealerShortName }}</span
          >提出的购买{{ data.companyName }}机 动车的申请（汇票号码：<span style="text-decoration:underline">{{ data.billNo }}</span
          >），金额(元)：<span style="text-decoration:underline">{{ data.oemDirectivePrice }}</span
          >元，期限：<span style="text-decoration:underline">{{ data.bYear }}</span> 年<span style="text-decoration:underline">{{ data.bMouth }}</span
          >月<span style="text-decoration:underline">{{ data.bDay }}</span
          >日至<span style="text-decoration:underline">{{ data.eYear }}</span
          >年<span style="text-decoration:underline">{{ data.eMouth }}</span
          >月<span style="text-decoration:underline">{{ data.eDay }}</span
          >日，经审查符合为其核定的承税最高限 额，现按照合同约定将本笔银行承兑汇票项下的汽车合格证原件送达贵行作为 质押，详见附表：
        </p>
        <p style="font-size:20px;margin:20px 0;">附表1页，{{ data.vehicleVOs.length - 1 }}张合格证清单</p>
        <p style="font-size:20px;float:left;line-height:20px;margin-top:10px;margin-bottom:10px">北京汽车股份有限公司</p>
        <p style="font-size:20px;float:right;line-height:20px;margin-top:10px;margin-bottom:10px">北京汽车股份有限公司</p>
        <p style="font-size:20px;clear:both;float:left;line-height:20px;margin-top:10px;margin-bottom:10px">销售部物流管理科（印章）</p>
        <p style="font-size:20px;float:right;line-height:20px;margin-top:10px;margin-bottom:10px">销售部物流管理科指定联系人（签章）</p>
        <p style="font-size:20px;clear:both;float:left;line-height:20px;margin-top:10px;margin-bottom:10px">北京汽车股份有限公司销售部</p>
        <p style="font-size:20px;float:right;">
          <span style="display:block;">{{ data.dYear }}年{{ data.dMouth }}月{{ data.dDay }}日</span>
          <span style="display:block;margin-top:10px;"
            ><span style="text-decoration:underline">{{
              data.accountTypeName == null ? '' : data.accountTypeName.indexOf('(') != -1 ? data.accountTypeName.substring(0, data.accountTypeName.indexOf('(')) : data.accountTypeName
            }}</span
            >公司</span
          >
        </p>

        <p style="font-size:18px;clear:both;float:left;">（印章）</p>
        <p style="font-size:18px;float:right;margin-top:20px;">（公章）</p>
      </div>
      <div style="clear:both;width:100%;height:0px; border-bottom:1px dashed #000"></div>
      <div style="padding:0 40px;">
        <p style="float:right;font-size:18px;">编号：（2011——GD01—— ）</p>
        <div></div>
        <!-- 送达通知书回执 -->
        <p style="clear:both;width:100%;text-align:center;margin-top:50px;margin-bottom:10px;font-weight:bold;font-size:20px;">北京汽车合格证送达通知书（回执）</p>
        <p style="float:left;font-size:18px;line-height:24px;">北京汽车股份有限公司：</p>
        <p style="float:left;font-size:18px;line-height:24px;line-height: 2;">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我行已收到贵司为<span style="text-decoration:underline">{{ data.dealerName }}</span
          >（经销商）送达的汽车合格证原件，现签发本《北京汽车合格证送达通知书（回执）》，请查收。
        </p>
        <p style="clear:both;float:right;font-size:18px;margin-right:40px;">指定联系人：</p>
        <p style="clear:both;float:right;font-size:18px;margin:10px 0;">
          <span style="text-decoration:underline">{{
            data.accountTypeName == null ? '' : data.accountTypeName.indexOf('(') != -1 ? data.accountTypeName.substring(0, data.accountTypeName.indexOf('(')) : data.accountTypeName
          }}</span
          >公司
        </p>
        <p style="clear:both;float:right;font-size:18px;margin:10px 0;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;日</p>
        <p style="clear:both;float:right;font-size:18px;margin:10px 0;">（公章）</p>
        <p style="clear:both;float:right;font-size:18px;margin:10px 0;">{{ data.dYear }}年{{ data.dMouth }}月{{ data.dDay }}日</p>
      </div>
      <div style="width:100%;height:550px;"></div>
      <div>
        <!-- 表格 -->
        <table width="100%" style="border-collapse:separate;" border="1">
          <tbody>
            <tr style="font-weight:bold;">
              <td>序号</td>
              <td>车型名称</td>
              <td>识别代码</td>
              <td>发动机号</td>
              <td>金额(元)</td>
            </tr>
          </tbody>
          <tbody>
            <tr style="border:1px solid #000;" v-for="(li, index) in data.vehicleVOs" :key="index">
              <td style="text-align:center;border:1px solid #000;">{{ li.vin ? index + 1 : '' }}</td>
              <td style="text-align:left;border:1px solid #000;">{{ li.productName }}</td>
              <td style="text-align:center;border:1px solid #000;">{{ li.vin }}</td>
              <td style="text-align:left;border:1px solid #000;">{{ li.engineNo }}</td>
              <td style="text-align:left;border:1px solid #000;">{{ li.oemDirectivePrice }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
</style>
<script>
/**
 * @Author: 焦质晔
 * @Date: 2019/4/22
 * @Last Modified by:   焦质晔
 * @Last Modified time: 2019-04-22 15:45:09
 **/
import moment from 'moment';

export default {
  name: 'template1',
  props: {
    data: {
      type: Object,
      required: true,
      default() {
        return {
          vehicleVOs: []
        };
      }
    },
    isPreview: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      nowTime: moment().format('YYYY-MM-DD HH:mm:ss')
    };
  },
  computed: {
    totalPrice() {
      return '';
      // return this.data.items.reduce((prev, curr) => {
      //   return curr.ckdj * curr.ckdj + prev;
      // }, 0);
    }
  },
  methods: {
    fillInToDom() {
      this.isPreview = true;
    }
  },
  mounted() {
    this.$emit('onPrintTable', this.$refs.print.innerHTML);
    if (this.isPreview) {
      this.fillInToDom();
    }
  }
};
</script>
